<template>
	<view v-if="detail != null" class="pt10">
		<view class="pd16_15 bg-w">
			<swiper indicator-color="rgba(255, 255, 255, 0.3)" indicator-active-color="#FFFFFF" :indicator-dots="true"
				:autoplay="true" :interval="3000" :duration="500" class="detail-banner">
				<swiper-item v-for="(item,index) in detail.rotation" :key="index">
					<image :src="item" mode="aspectFill"></image>
				</swiper-item>

			</swiper>

			<view class="mt16">
				<view class="ft16 cl-main ftw600">{{detail.name}}</view>
				<view class="mt12 flex alcenter space">
					<view>
						<text class="ft14 cl-price">¥ </text>
						<text class="ft20 ftw600 cl-price"> {{ dailyPrice(detail.period_pricing) }} </text>
						<text class="ft12 cl-notice"> /天</text>

					</view>
					<view class="ft14 cl-notice">已约{{detail.fictitious_take_count}}</view>
				</view>
			</view>
		</view>
		<view class="bg-w mt16">
			<!-- <sub-tab :isMain="true" :tabs="tabs" @change="changIndex" :selectIndex="selectIndex"></sub-tab> -->

			<!-- <view class="nav-tab-list">
				<view class="main">
					<view  v-for="(item,index) in tabs" :key="index" @click="changIndex(index)" :class="selectIndex == index ? 'ft16  ftw600 btnStyleTrue text-center' : 'ft14  ftw500 btnStyleFalse text-center' ">
						{{item}}
					</view>
				</view>
				<view class="bd" :style="getL"></view>
			</view> -->
			<u-sticky bgColor="#fff">
				<u-tabs :lineColor='mainColor' :list="tabs" @click="changIndex" :activeStyle="{
						color: mainColor,
						fontWeight: 'bold',
						transform: 'scale(1.05)'
					}" :inactiveStyle="{
						color: '#606266',
						transform: 'scale(1)'
					}">
				</u-tabs>

			</u-sticky>

			<view v-if="detail.details" v-show="selectIndex == 0" class="pd16_15">
				<!-- <com-editorshow :content="detail.details"></com-editorshow> -->
				<rich-text :nodes="formatRichText(detail.details)"></rich-text>
			</view>
			<view v-if="detail.info" v-show="selectIndex == 1" class="pd16_15">
				<rich-text :nodes="formatRichText(detail.info)"></rich-text>
			</view>
		</view>

		<view v-if="isBtn" class="form-footer-h">
			<view class="form-footer-h form-footer">
				<view class="form-footer-main pd10_15">
					<navigator :url="'/pages/client/service/index?id='+id">
						<view class="btn-big" @click="handleReserve(detail.id)">立即下单</view>
					</navigator>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getProjectDetail
	} from '@/apis/index_callback.js';
	import theme from '@/common/theme'
	import store from '@/store';
	import {
		isLogin
	} from '@/plugins/auth';


	export default {
		data() {
			return {
				id: 0,
				tabs: [{
					name: '服务详情',
				}, {
					name: '服务须知',
				}],
				selectIndex: 0,
				detail: null,
				mainColor: theme.mainColor,
				isBtn: true
			}
		},
		onLoad(e) {
			if (e.id) {
				this.id = e.id;
			}
			if(e.page == "order"){
				this.isBtn = false
			}
			// if (e.pid) {
			// 	this.$store.commit('setParentId', e.pid);
			// }
			this.getDetail();
		},
		onUnload() {
			// 增加项目的查看数
			// this.saveRadar('product_detail',this.id,'查看了项目:');
		},
		// onShareAppMessage(e) {
		// 	let url = '';
		// 	url = '/pages/client/project/detail?id=' + this.id;
		// 	if (this.checkLogin) {
		// 		url += '&pid=' + this.memberInfo.member_id;
		// 	}
		// 	console.log(url);
		// 	return {
		// 		title: this.detail.name,
		// 		path: url
		// 	}
		// },
		// onShareTimeline(e) {
		// 	let url = '';
		// 	url = '/pages/client/project/detail?id=' + this.id;
		// 	if (this.checkLogin) {
		// 		url += '&pid=' + this.memberInfo.member_id;
		// 	}
		// 	return {
		// 		title: this.detail.name,
		// 		path: url
		// 	}
		// },
		methods: {
			dailyPrice(item) {
				if (item){
					const price = JSON.parse(item)["year"];
					return (price / 100 / 365).toFixed(2);
				}
				return 0
			},
			changIndex(e) {
				this.selectIndex = e.index;
			},
			// 处理预约点击事件
			handleReserve(projectId) {
				if (!isLogin()) {
					// 未登录，调用登录接口
					uni.showModal({
						title: '暂未登录',
						content: '你确定跳转登录页吗！',
						success(res) {
							if (res.confirm) {
								// that.emptyUserInfo();
								setTimeout(() => {
									// uni.navigateBack({delta: 1})
									uni.switchTab({
										url: "/pages/my/myInfo"
									})
								}, 500)
							} else if (res.cancel) {}
						}
					})
				}else{
					setTimeout(() => {
						uni.navigateTo({
							url: '/pages2/order/create?id=' + projectId
						});
					}, 500)

				}
			},

			formatRichText(html) {
				let newContent = html.replace(/<img[^>]*>/gi, function(
					match,
					capture
				) {
					match = match
						.replace(/style="[^"]+"/gi, "")
						.replace(/style='[^']+'/gi, "");
					match = match
						.replace(/width="[^"]+"/gi, "")
						.replace(/width='[^']+'/gi, "");
					match = match
						.replace(/height="[^"]+"/gi, "")
						.replace(/height='[^']+'/gi, "");
					return match;
				});
				newContent = newContent.replace(/style="[^"]+"/gi, function(
					match,
					capture
				) {
					match = match
						.replace(/width:[^;]+;/gi, "max-width:100%;")
						.replace(/width:[^;]+;/gi, "max-width:100%;");
					return match;
				});
				newContent = newContent.replace(/<br[^>]*\/>/gi, "");
				newContent = newContent.replace(
					/\<img/gi,
					'<img style="max-width:100%;height:auto;display:block;margin-top:0;margin-bottom:0;"'
				);
				return newContent;
			},

			getDetail() {
				store.commit("setLoadingShow", true);
				let id = this.id
				getProjectDetail({
					id
				}, res => {
					res.rotation = JSON.parse(res.rotation)
					this.detail = res;
					store.commit("setLoadingShow", false);
				}, err => {
					console.error('获取项目详情失败:', err);
					uni.showToast({
						title: '加载失败',
						icon: 'none'
					});
				});
			},
			getW() {
				if (this.tabs.length == 0) return 0;
				let len = this.tabs.length;
				let w = 100 / len;
				return w;
			},
			getWstyle() {
				let arr = new Array;
				for (var a in this.tabs) {
					let style = 'width:' + this.getW + '%;';
					arr.push(style);
				}
				return arr;
			},

			getL() {
				let w = this.getW;
				let w2 = w / 2;
				let l = this.selectIndex * w + w2;
				let style = 'left:calc(' + l + '% - ' + uni.upx2px(18) + 'px);';
				return style;
			},
			// 清理 URL 中的非法字符
			cleanupURL(url) {
				if (!url) return '';
				// 替换所有反斜杠为正斜杠，并确保 HTTPS 协议
				return url
					.replace(/\\/g, '/') // 关键步骤：将 \ 替换为 /
					.replace(/^http:/, 'https:') // 确保 HTTPS
					.replace('https:////', 'https://') // 修复多余斜杠
					.replace('https:///', 'https://');
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import '@/common/variables.scss'; // ✅ 必须引入
	
	::v-deep .u-tabs__wrapper__nav {

		justify-content: space-around;
	}

	::v-deep .u-tabs__wrapper__nav__item {
		flex: 1 !important;
	}

	::v-deep .u-tabs__wrapper__nav__line {
		left: 0;
	}

	.detail-banner {
		width: 100%;
		height: 630rpx;
	}

	.detail-banner image {
		width: 100%;
		height: 630rpx;
		background: #f2f2f2;
	}

	.pd16_15 {
		padding: 32rpx 30rpx;
	}

	.bg-w {
		background: #FFFFFF;
	}

	.mt16 {
		margin-top: 32rpx;
	}

	.ft16 {
		font-size: 32rpx;
	}

	.cl-main {
		color: #232529;
	}

	.ftw600 {
		font-weight: 600;
	}

	.mt12 {
		margin-top: 24rpx;
	}

	.flex.alcenter {
		align-items: center;
	}

	.flex.space {
		justify-content: space-between;
	}

	.ft14 {
		font-size: 28rpx;
	}

	.cl-price {
		color: #FF6600;
	}

	.ft20 {
		font-size: 40rpx;
	}

	.ft12 {
		font-size: 24rpx;
	}

	.cl-notice {
		color: #838999;
	}

	.form-footer-h {
		height: 140rpx;
		height: calc(140rpx + constant(safe-area-inset-bottom));
		height: calc(140rpx + env(safe-area-inset-bottom));
	}

	.form-footer {
		width: 100%;
		position: fixed;
		z-index: 10;
		left: 0;
		bottom: 0;
		background: #FFFFFF;
		box-shadow: 0rpx -4rpx 16rpx 0rpx rgba(0, 0, 0, 0.04);
	}

	.form-footer-main {
		width: 100%;
		height: 140rpx;
	}

	.pd10_15 {
		padding: 20rpx 30rpx;
	}

	.btn-big,
	.btn-manage,
	.btn-mid,
	.btn-manage-mid,
	.btn-small,
	.btn-mini,
	.btn-manage-small,
	.btn-manage-mini {
		width: 100%;
		height: 88rpx;
		border-radius: 50rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 32rpx;
		font-weight: 500;
		color: #000000;
		background-color: $btn-default-bg;
		color: $btn-primary-text;
		margin: 0;
		padding: 0;
		transition: all 0.4s;
	}

	.btn-big.dis,
	.btn-manage.dis,
	.btn-mid.dis,
	.btn-manage-mid.dis,
	.btn-small.dis,
	.btn-mini.dis,
	.btn-manage-small.dis,
	.btn-manage-mini.dis {
		background: #F0F1F5;
		color: #AEB2C1;
	}
</style>